<template>
    <div class="contain">
        <div class="wrapper">
    <swiper :options="swiperOptions">
       <swiper-slide v-for="item in imgArr" :key="item.id">
        <img :src="item.url" class="grallyImg" alt="">
       </swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
   </swiper>
        </div>
    </div>
</template>

<script>
export default {
    name:'CommonGallary', //公用画廊模板
    data(){
        return{
            swiperOptions:{
                pagination:'.swiper-pagination',
                paginationType : 'fraction',
                observeParents:true,
                observer:true
            }
        }
    },
    props:{
        imgArr:{
            type:Array,
            default() {
                return [] //默认是一个空数组，可以直接写，也可以以方法的形式来规定默认值
            },
            required:true
        }
    }
}
</script>

<style lang="stylus" scoped>
.contain
    z-index 99
    position fixed
    left 0
    top 0
    right 0
    bottom 0
    background-color #000
    display  flex
    flex-direction column
    justify-content center
    .wrapper
        position relative
        background-color #fff
        width 100%
        height 0
        padding-bottom 50%
        .grallyImg
            width 100%
        .swiper-pagination
            color white
            bottom -.8rem
        .swiper-container
            overflow inherit
            
</style>